* {
    margin: 0;
    padding: 0;
}
body{
    text-align: center;
}
.box {
    width: 200px;
    margin: 50px auto;
    text-align: center;
    .slider {
        position: relative;
        left: 0;
        top: 0;
        height: 40px;
        border-radius: 20px;
        border: 1px solid skyblue;
        font-size: 12px;
        .mask {
            background-color: skyblue;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 20px;
            .sliderBox {
                position: relative;
                left: 0;
                top: 0;
                height: 40px;
                width: 40px;
                border-radius: 20px;
                cursor: pointer;
                background-color: skyblue;
                transition: background .3s;
                .icon {
                    display: block;
                    position: absolute;
                    height: 15px;
                    width: 15px;
                    top: 12px;
                    left: 12px;
                    background: url(../image/icon.png) 0px -23px;
                }
                &:hover {
                    background: rgb(5, 3, 17);
                    .icon {
                        background-position-y: -10px;
                    }
                }
            }
        }
    }

    .text {
        line-height: 40px;
    }
}